<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>06-案例：轮播图</title>
    <style>
        div {
            text-align: center;
        }
    </style>
</head>

<body>
    <!--
    轮播图&图片跳转
        setInterval(函数,间隔时间) 每隔固定间隔时间(毫秒)执行一次函数
        document.getElementById(id属性值) 获得指定id的标签对象
-->
    <div>
        <h1>轮播效果图</h1>
        <img id="myImg" src="img/0.jpg" width="500px">

        <br>
        <hr>
        <h1>查看图片详情</h1>
        <br>
        <img id="img" src="img/0.jpg" width="500px">
        <br>
        <button id="up">上一张</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="down">下一张</button>

    </div>

    <!-- 轮播图js代码 -->
    <script>
        let i = 0;
        function method01() {
            // 找到img元素
            let img = document.getElementById("myImg");
            i++;
            img.src = "img/" + i + ".jpg";
            if (i == 4) {
                i = -1;
            }
        }
        setInterval("method01()", 1000);
    </script>

    <!-- 查看图片详情js代码 -->
    <script>
        let j = 0;
        // 显示上一张图片方法
        function up() {
            // 根据id获取img元素标签
            let img = document.getElementById("img");
            if (j > 0 && j <= 4) {
                j--;
                console.log(j);
            } else {
                j = 0;
            }
            // 设置属性值
            img.src = "img/" + j + ".jpg";
        }

        // 显示下一张图片方法
        function down() {
            // 根据id获取img元素标签
            let img = document.getElementById("img");
            // 判断id
            if (j >= 0 && j < 4) {
                j++;
            } else {
                j = 4;
            }
            // 设置属性值
            img.src = "img/" + j + ".jpg";
        }

        // 绑定单击事件
        document.getElementById("up").onclick = up;
        document.getElementById("down").onclick = down;


    </script>

</body>

</html>